<template>
  <div>
    <div style="width: 100%;height: 600px;">
      <el-carousel :interval="5000" arrow="always" indicator-position="outside" style="width: 100%;" >
        <el-carousel-item v-for="(item, index) in state.carouselItems" :key="index">
          <img :src="item.src" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { ElCarousel, ElCarouselItem } from 'element-plus'
import {reactive} from 'vue'
export default {
  name: '',
  setup() {
    const state = reactive({
      carouselItems: [
        { src: require('@/components/R (1).jpg') },
        { src: require('@/components/R.jpg') },
        { src: require('@/components/R (2).jpg') },
        { src: require('@/components/R (3).jpg') }
      ],
      currentCarouselIndex: 0
    })
    return {
      state
      // your code here
    }
  },
//生命周期
created(){
},
//生命周期
mounted(){
},
//注册组件
components:{
},
};
</script>
<style lang='less' scoped>
/deep/.el-carousel__container{
  height: 500px !important;
}
// .carousel {
//   height: 400px; /* 修改轮播图高度为 400px */
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   position: relative;
// }

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
